<template>
	<div class="pckDiv">
		<div class="pckDivBody">
			<view class="line">
				<text>证书类别:</text>
				<picker @change="bindPickerChange" :value="index" :range="array" range-key='name'>
					<view class="uni-input" v-if="array[index].name==undefined">请选择证书类型</view>
					<view class="uni-input" v-if="array[index].name!=undefined">{{array[index].name}}</view>
					<text style="display: none;">{{arrayVal}}</text>
				</picker>
			</view>
			<view class="line" v-if="arrayDengji.length!=0">
				<text>证书等级:</text>
				<picker @change="dengjiChange" :value="dengjiIndex" :range="arrayDengji" range-key='name'>
					<view class="uni-input" v-if="arrayDengji[dengjiIndex].name==undefined">请选择证书等级</view>
					<view class="uni-input" v-if="arrayDengji[dengjiIndex].name!=undefined">
						{{arrayDengji[dengjiIndex].name}}
					</view>
					<text style="display: none;">{{dengjiVal}}</text>
				</picker>
			</view>
			<view class="line" v-if="arrayZy.length!=0">
				<text>证书专业:</text>
				<picker @change="zhuanyeChange" :value="zyIndex" :range="arrayZy" range-key='name'>
					<view class="uni-input" v-if="arrayZy[zyIndex].name==undefined">请选择证书专业</view>
					<view class="uni-input" v-if="arrayZy[zyIndex].name!=undefined">{{arrayZy[zyIndex].name}}</view>
					<text style="display: none;">{{zyVal}}</text>
				</picker>
			</view>
			<view class="btn">
				<view class="cancle" @click="cancle">取消</view>
				<view class="ok" @click="submit">确定</view>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["morenCert"],

		inject: ['updateMoren'],
		data() {
			return {
				array: [], //证书
				arrayDengji: [], //等级
				arrayZy: [], //专业
				index: '',
				dengjiIndex: '', //等级index
				zyIndex: '', //专业index
				arrayVal: '',
				dengjiVal: '',
				zyVal: '',
				finallString: '',
				morenCert: this.morenCert
			}
		},

		created() {
			let dataList = this.$store.state.certTags
			this.array = dataList
			this.dengjiVal = ''
			this.zyVal = ''
			this.dengjiIndex = ''
			this.zyIndex = ''
			console.log('全部')
			console.log(this.morenCert)
			// 回显证书类别
			for (let i = 0; i < dataList.length; i++) {
				if (dataList[i].name == this.morenCert[0]) {
					this.index = i
					this.arrayVal = dataList[i].name
					// 回显当前证书等级
					if (dataList[i].children.length != 0) {
						this.arrayDengji = dataList[i].children
						// 回显证书等级
						for (let j = 0; j < dataList[i].children.length; j++) {
							if (dataList[i].children[j].name == this.morenCert[1]) {
								this.dengjiIndex = j
								this.dengjiVal = dataList[i].children[j].name
								// // 回显专业
								if (dataList[i].children[j].children.length != 0) {

									this.arrayZy = dataList[i].children[j].children
									for (let k = 0; k < dataList[i].children[j].children.length; k++) {
										if (dataList[i].children[j].children[k].name == this.morenCert[2]) {
											console.log('zhuanye')
											this.zyIndex = k
											this.zyVal = dataList[i].children[j].children[k].name
										}

									}

								}
							}

						}
					}
				}

			}
		},
		methods: {
			// 回显默认显示
			bindPickerChangeMoren: function(m) {
				this.index = m
				// 重置两个子集数据
				this.arrayDengji = []
				this.arrayZy = []
				//重置
				this.arrayVal = ''
				this.dengjiVal = ''
				// 选的值赋给arrayVal
				this.arrayVal = this.array[this.index].name
				// 判断该证书是否存在子集
				if (this.array[this.index].children.length != 0) {
					// 证书等级渲染
					this.arrayDengji = this.array[this.index].children
					this.dengjiVal = this.arrayDengji[this.dengjiIndex].name
				}
			},
			// 初始化地址选项
			bindPickerChange: function(e) {
				this.index = e.target.value

				// 重置两个子集数据
				this.arrayDengji = []
				this.arrayZy = []
				//重置
				this.arrayVal = ''
				this.dengjiVal = ''
				this.zyVal = ''
				this.dengjiIndex = ''
				this.zyIndex = ''
				// 选的值赋给arrayVal
				this.arrayVal = this.array[this.index].name
				// 判断该证书是否存在子集
				for (let i = 0; i < this.array.length; i++) {
					if (this.index == i) {
						if (this.array[i].children.length != 0) {
							// 证书等级渲染
							this.arrayDengji = this.array[i].children
							// this.dengjiVal = this.arrayDengji[i].name
							// 渲染专业
							if (this.array[i].children.length != 0) {
								for (let j = 0; j < this.array[i].children[j].length; j++) {
									this.arrayZy = this.array[i].children[j]
									this.zyIndex = j
									this.zyVal = this.array[i].children[j].name
								}
							}
						}
					}

				}

			},
			dengjiChange(e) {
				this.dengjiIndex = e.target.value
				this.dengjiVal = this.arrayDengji[this.dengjiIndex].name
				this.arrayZy = []
				this.zyIndex = ''
				this.zyVal = ''
				if (this.arrayDengji[this.dengjiIndex].children.length != 0) {
					this.arrayZy = this.arrayDengji[this.dengjiIndex].children
				}
			},
			zhuanyeChange(e) {
				this.zyIndex = e.target.value
				this.zyVal = this.arrayZy[this.zyIndex].name
			},
			submit() {

				if (this.dengjiVal == '' || this.dengjiVal == null) {
					this.finallString = this.arrayVal
					this.updateMoren(this.finallString)
				}
				if (this.dengjiVal != '' && this.dengjiVal != null) {
					this.finallString = this.arrayVal + '-' + this.dengjiVal
					this.updateMoren(this.finallString)
				}
				if ((this.dengjiVal != '' && this.dengjiVal != null) && (this.zyVal != '' && this.zyVal != null)) {
					this.finallString = this.arrayVal + '-' + this.dengjiVal + '-' + this.zyVal
					this.updateMoren(this.finallString)
				}
				this.$emit('getCersList', this.finallString)
				this.$parent.showCerts()
			},
			cancle() {
				this.$parent.showCerts()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pckDiv {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
	}

	.pckDivBody {
		width: 670rpx;
		background: #ffffff;
		/* margin: 0 auto; */
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.line {
		padding: 26rpx 25rpx;
		display: flex;
		font-size: 30rpx;
	}

	.uni-input {
		font-size: 28rpx;
		margin-left: 20rpx;
		color: #999999;
		width: 410rpx;
	}

	.btn {
		display: flex;
		justify-content: space-around;
		margin: 40rpx 0;
	}

	.cancle,
	.ok {
		width: 180rpx;
		height: 79rpx;
		background: #f9f9f9;
		border: 1rpx solid #c0c3c8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ok {
		background-color: #5CD1CE;
		color: #ffffff;
	}
</style>
